﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:include page="../front.jsp"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <!-- 包含公共的JSP代码片段 -->

    <title>餐馆王平台</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="${front}/detail/style/js/jquery.js"></script>
    <script type="text/javascript" src="${front}/detail/style/js/page_common.js"></script>
    <link href="${front}/detail/style/css/common_style_blue.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="${front}/detail/style/css/index_1.css"/>
    <link href="${front}/detail/style/css/index.css" rel="stylesheet" type="text/css"/>
    <style>
        .food-page {
            cursor: pointer;
        }
    </style>
</head>
<body style="text-align: center">

    <a href="${front}/detail/clientOrderList.jsp">订单</a>
    <c:if test="${sessionScope.user == null}">
        <a href="${base}/user/login.jsp">登陆</a>
    </c:if>
    <c:if test="${sessionScope.user != null}">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        欢迎：
        ${sessionScope.user.userName}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="${base}/user?method=userLogout">退出登陆</a>
    </c:if>

    <c:if test="${sessionScope.user != null}">
        <a href="${base}/order?method=findOrder">历史订单</a>
    </c:if>

<div id="all">

    <div id="menu">
        <!-- 显示菜品的div -->
        <div id="top">
            <ul>
                <!-- 循环列出餐品 -->
                <c:forEach items="${pageBean.pageList}" var="food">
                    <li onclick="toFoodDetail(${food.foodId});">
                        <dl>
                            <dt>
                                <img width="214px" height="145px"
                                     src="${pageContext.request.contextPath}/${food.foodImage}"/>

                            </dt>
                            <dd class="f1">
                                <span style="font-size: 15px">${food.foodName}</span>
                            </dd>
                            <dd class="f2">
                                <span style="font-size: 15px"><b>&yen;</b>${food.foodPrice/100.0}</span>
                            </dd>
                        </dl>
                    </li>
                </c:forEach>
            </ul>
        </div>

        <!-- 底部分页导航条div -->
        <div id="foot">
            <%-- 上一页 --%>
            <span
                    style="float:left; line-height:53PX; margin-left:-50px; font-weight:bold; ">
							<span class="food-page" onclick="prev(${pageBean.pageNo});">&lt;&lt;</span>
						</span>


            <div id="btn">
                <ul>
                    <!-- 参看 百度, 谷歌是 左 5 右 4 -->
                    <c:forEach var="page" begin="1" end="${pageBean.totalPage}">
                        <li>
                            <a
                                    <c:if test="${page == pageBean.pageNo}">style='color:blue;'</c:if>
<%--                                    href="front?method=findFoodToPage&pageNo=${page}">${page}--%>
                                href="${base}/front?method=findFoodToPage&pageNo=${page}&foodTypeId=${foodTypeId}&foodName=${foodName}">${page}
                            </a>
                        </li>
                    </c:forEach>
                </ul>
            </div>
            <%-- 下一页 --%>
            <span style="float:right; line-height:53px; margin-right:10px; font-weight:bold; ">
							<span class="food-page" onclick="next(${pageBean.pageNo});">&gt;&gt;</span>
						</span>

        </div>

    </div>

    <!-- 右边菜系列表，菜品搜索框  -->
    <div id="dish_class">
        <div id="dish_top">
            <ul>
                <li class="dish_num"></li>
                <li>
                    <a href="${front}/detail/clientCart.jsp">
                        <img src="${front}/detail/style/images/call2.gif"/>
                    </a>
                </li>

            </ul>
        </div>

        <div id="dish_2">
            <ul>
                <c:forEach items="${sessionScope.foodTypeList}" var="type">
                    <li>
                        <a href="${base}/front?method=findFoodToPage&foodTypeId=${type.typeId}&foodName=${foodName}">${type.typeName}</a>
                    </li>
                </c:forEach>

            </ul>
        </div>
        <div id="dish_3">
            <!-- 搜索菜品表单  -->
            <form action="${base}/front?method=findFoodToPage" method="post">
                <table width="166px">
                    <tr>
                        <td>
                            <span style="font-size: 20px">菜品名称:</span><input type="text" value="${foodName}"
                                                                             id="dish_name" name="foodName"
                                                                             class="select_value"/>
                            <%--<input type="hidden" value="selectFood" name="method">--%>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="submit" id="sub" value=""/></td>
                    </tr>
                    <tr>
                        <td>
                            <a href="${base}/front?method=findFoodToPage">
                                <img src="${front}/detail/style/images/look.gif"/>
                            </a>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>

</div>
</body>

<script>
    //上一页
    function prev(pageNo) {
        if (pageNo > 1) {
            location.href = "${base}/front?method=findFoodToPage&pageNo=" + (pageNo - 1);
        }
    }

    //下一页
    function next(pageNo) {
        if (pageNo < ${pageBean.totalPage}) {
            location.href = "front?method=findFoodToPage&pageNo=" + (pageNo + 1);
        }
    }

    function toFoodDetail(id) {
        location.href = "front?method=findFoodByFoodId&foodId=" + id;
    }

</script>

</html>
